<template>
	<view class="particulars" ref="main" :class="{overflow:is_preposition || is_share}">
		<view class="top">
			<view class="left" @click="back">
				<!-- <uni-icons type="arrowleft" size="24" class="left" color="#fff" ></uni-icons> -->
				<image src="/static/img/back.png" mode=""></image>

			</view>
			<view class="like" @click="like" v-if="goodDetails&&!actId">
				<image src="/static/img/like3.png" v-if="goodDetails.isCollect" />
				<image src="/static/img/like1.png" v-else />

			</view>
			<view class="share" @click="is_share = true">
				<image src="/static/img/share1.png" />
			</view>
		</view>
		<view class="carousel">
			<view class="banner" v-if="banner">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" :circular="true"
				 style="height: 562rpx;" @change="changePage">
					<swiper-item v-for="(items, index) in goodImag" :key="index">
						<image style="width: 100%;height: 562rpx;" :src="items" />
					</swiper-item>
				</swiper>
			</view>
			<view class="dots">{{ dots + 1 }}/{{ goodImag.length }}</view>
		</view>
		<view class="" v-if="actType==2">
			<view class="activity" v-if="start == 0">
				<image src="/static/img/alarm.png" />
				距离活动开始时间： {{ time }}
			</view>
			<view class="activity" v-if="start == 1 && actId">
				<image src="/static/img/alarm.png" />
				距离活动结束时间： {{ time }}
			</view>
		</view>
		
		<view class="message" v-if="goodDetails.skus">
			<view class="price">
				￥{{ goodDetails.skus[0].discountPrice }}
				<text class="original" v-if="goodDetails.skus[0].discountPrice != goodDetails.skus[0].marketPrice">  ￥{{ goodDetails.skus[0].marketPrice }}</text>
				<text class="discount" v-if="1 == 2">2.5折</text>
			</view>
			<view class="name">{{ goodDetails.goodsName }}</view>
		</view>
		<view class="cut-off"></view>
		<view class="specification" v-if="shop_details[0]">
			<view class="name">
				选择
				<!-- <text>{{ goodDetails.specs[0].specName }}</text> -->
				<!-- <text v-for="(item, index) in goodDetails.specs" :key="index" v-if="index > 0">/{{ item.specName }}</text> -->
				<!-- <uni-icons type="arrowright" size="30rpx" color="#9b9b9b" class="right" /> -->
			</view>
			<view class="ul" v-if="shop_details.lenght!==0">
				<view class="flex">
					<view class="li" v-for="(item, index1) in shop_details[0].sublevel" :key="index1" :class="{ active:index1 == indexs}"
					 @click="checkeds(item, index1)">
						{{ item }}
					</view>
				</view>
				<view class="flex">
					<view class="li" v-for="(item, index) in shop_details[0].size" :key="index" :class="{ active: index == idx}"
					 @click="checkcolor(item, index)">
						{{ item }}
					</view>
				</view>

			</view>
		</view>
		<view class="cut-off"></view>
		<view class="refund">
			<image src="/static/img/refund1.png" />
			7天退款
			<image src="/static/img/refund2.png" />
			不支持过期退款
		</view>
		<view class="cut-off"></view>
		<view class="buyers-show" v-if="buyershowlist">
			<view class="title">
				买家秀（{{ buyershowlist }}）
				<text @click="go_show(goodDetails.goodsId)">查看全部 >></text>
			</view>
			<view class="img-list">
				<view class="img" v-for="(item, index) in buyershow" :key="index" @click="godetail(item.id)">
					<image :src="item.img[0]" mode="aspectFill" />
				</view>
			</view>
		</view>
		<view class="cut-off" v-if="buyershowlist"></view>
		<view class="introduce">
			<view class="rule">
				<view class="title"><text>商品详情</text></view>
				<view class="list" v-for="(item, index) in goodDetails.params" :key="index">{{ item.paramName }} {{ item.paramValue }}</view>
			</view>
			<view class="image-text">
				<rich-text :nodes="goodDetails.goodsIntro"></rich-text>
			</view>
		</view>
		<view class="bottom">
			<text class="go_car" @click="add" v-if="!actId&&issee">加入购物车</text>
			<text class="buy" @click="is_preposition = 2">立即购买</text>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop">
			<image src="/static/img/go_top.png" />
		</view>
		<transition name="fade">
			<view class="ceng" v-show="is_preposition || is_share" @click="ceng"></view>
		</transition>
		<view class="preposition" v-show="is_preposition">
			<view class="intro" v-if="goodDetails.skus">
				<view class="img">
					<image :src="productImg" mode="aspectFill" />
				</view>
				<view class="text">
					<view class="name">{{ goodDetails.goodsName }}</view>
					<view class="price">￥{{ disPrice }}</view>
					<view class="control">
						<text>-</text>
						<text>1</text>
						<text>+</text>
					</view>
				</view>
				<view class="close" @click="ceng">
					<uni-icons type="closeempty" size="30rpx" color="#9b9b9b" class="uni-icons" />
				</view>
			</view>
			<view class="parameter">
				<view class="name">
					选择颜色/尺码
					<i class="cubeic-arrow right"></i>
				</view>

				<view class="ul" v-if="shop_details[0]">
					<view class="flex">
						<view class="li" v-for="(item, index1) in shop_details[0].sublevel" :key="index1" :class="{ active:index1 == indexs}"
						 @click="checkeds(item, index1)">
							{{ item }}
						</view>
					</view>
					<view class="flex">
						<view class="li" v-for="(item, index) in shop_details[0].size" :key="index" :class="{ active: index == idx}"
						 @click="checkcolor(item, index)">
							{{ item }}
						</view>
					</view>

				</view>

			</view>
			<view class="button" @click="sub()">确 定</view>
		</view>
		<view class="qrimg">
		    <tki-qrcode
		    ref="qrcode"
		    :val="val"
		    :size="size"
		    :unit="unit"
		    :background="background"
		    :foreground="foreground"
		    :pdground="pdground"
		    :icon="icon"
		    :iconSize="iconsize"
		    :lv="lv" 
		    :onval="onval"
		    :loadMake="loadMake"
		    :usingComponents="usingComponents"
		    :showLoading="showLoading"
		    :loadingText="loadingText"
		    @result="qrR" />
		</view>
		<view class="sharelist" v-show="is_share">
			<view class="ul">
				<view class="li" @click="copy">
					<image src="/static/img/share_link.png" />
					<view>复制链接</view>
				</view>
				<view class="li" @click="share('wx')">
					<image src="/static/img/share_wx.png" />
					<view>微信</view>
				</view>
				<!-- <view class="li">
					<image src="/static/img/share_qq.png" />
					<view>QQ</view>
				</view> -->
				<view class="li">
					<image src="/static/img/share_code.png" />
					<view>二维码</view>
				</view>
			</view>
			<view class="close" @click="ceng">取消</view>
		</view>
	</view>
</template>
<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import goodDetails from '../../../servers/commodity/particulars.js';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

	export default {
		components: {
			uniIcons,tkiQrcode
		},
		data() {
			return {
				id: '', //商品id
				actId: '', //商品id
				goodDetails: [],
				time: '',
				buyershow: [],
				buyershowlist: null,
				goodImag: [],
				shop_details: [],
				material: {
					height: null,
					weight: null
				},
				checked: '',
				checked1: '',
				banner: [{
						image: '/static/img/banner.png'
					},
					{
						image: '/static/img/banner.png'
					},
					{
						image: '/static/img/banner.png'
					}
				],
				dots: 0,
				is_go_top: false,
				is_preposition: 0,
				is_share: false,
				startFlag: '',
				endFlag: '',
				start: 0,
				productImg: '',
				disPrice:'',
				actType:'',
				idx: 0,
				indexs: 0,
				issee:true,
				val: '二维码', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'rpx', // 单位
				background: '#fff', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: false, // 组件加载完成后自动生成二维码
				usingComponents:'',
				showLoading:true,
				loadingText:'',
				src: '' // 二维码生成后的图片地址或base64
			};
		},
		onPageScroll: function(e) {
			//nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) {
				this.is_go_top = true;
			} else {
				this.is_go_top = false;
			}
		},
		mounted() {
			var _this = this;
			this.actId = this.commonality.route_get('actId', this.$route);
			this.id = this.commonality.route_get('shopId', this.$route);
			this.actType=this.commonality.route_get('actType', this.$route);
			console.log(this.id,this.actId,this.actType)
			// uni.showLoading({
			// 	title: '数据加载中',
			// 	mask: true
			// });
			if (this.id) {
				_this.getDate();
			}
			if(uni.getStorageSync('mr')=='a'){
				this.issee=false
			}else{
				this.issee=true
			}
			
		
		},
		methods: {
			add() {
				this.is_preposition = 1
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDate() {
				var login = uni.getStorageSync('login');
				var _this = this
				if (!login) {
					uni.showModal({
						title: '提示',
						content: '登录以后才能购买',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/shop/account/login'
								});
							} else if (res.cancel) {
								uni.switchTab({
									url: '/pages/shop/index'
								})
							}
						}
					});
					return;
				}
				if (this.actId) {
					goodDetails
						.getAct(this.actId)
						.then(res => {
							this.endFlag = res.data.endFlag;
							this.startFlag = res.data.startFlag;
							if (this.endFlag < Date.parse(new Date())) {
								this.start = 2;
								//活动已经结束，页面不允许点击，并跳转到listy页面
								uni.showToast({
									title: '活动已经结束',
									duration: 2000,
									icon:'none'
								});
								setTimeout(function(){_this.back()},500)
								
							} else {
								this.settime();
								goodDetails
									.goodDetailsact(this.id, this.actId)
									.then(res => {
										if(res.code ===200){
											
										this.goodDetails = res.data;
										console.log(this.goodDetails)
										this.goodImag = this.goodDetails.imgs.map(v => {
											v = this.imgCDNUrl + v;
											return v;
										});
										if (this.goodDetails.skus[0].productImg) {
											this.productImg = this.imgCDNUrl + this.goodDetails.skus[0].productImg;
										} else {
											this.productImg = this.goodImag[0];
										}
										this.disPrice=this.goodDetails.skus[0].marketPrice
										this.screen();
										}else{
											uni.showModal({
												title: '提示',
												content: '未找到商品，去其他地方看看吧',
												confirmText: '首页',
												success: function(res) {
													if (res.confirm) {
														uni.switchTab({
															url: '/pages/shop/index'
														})
													} else if (res.cancel) {
														_this.back()
													}
												}
											});
										}
									})
									.catch(err => {
										console.log(new Error('请检查网络后重试'));
									});
							}
						})
						.catch(err => {
							console.log(err)
							console.log(new Error('请检查网络后重试'));
						});
				} else {
					this.start = 1;
					goodDetails
						.goodDetails(this.id)
						.then(res => {
							var footprint = uni.getStorageSync('footprint');
							var repetition = 0;
							if (!footprint) footprint = [];
							
							var da = {
								actId: 0,
								goodsId: res.data.goodsId,
								goodsName: res.data.goodsName,
								imgs: res.data.imgs[0],
								marketPrice: res.data.skus[0].marketPrice,
								discountPrice: res.data.skus[0].discountPrice
							};
							for (var i = 0; i < footprint.length; i++) {
								if (footprint[i].goodsId == da.goodsId) {
									repetition = 1;
								}
							}

							if (repetition == 0) {
								footprint.push(da);
								uni.setStorageSync('footprint', footprint);
							}

							this.goodDetails = res.data;
							this.goodImag = this.goodDetails.imgs.map(v => {
								v = this.imgCDNUrl + v;
								return v;
							});
							console.log(this.goodDetails)
							if (this.goodDetails.skus[0].productImg) {
								this.productImg = this.imgCDNUrl + this.goodDetails.skus[0].productImg;
							} else {
								this.productImg = this.goodImag[0];
							}
							this.disPrice=this.goodDetails.skus[0].marketPrice
							this.screen();
						})
						.catch(err => {
							console.log(err)
							console.log(new Error('请检查网络后重试'));
						});
				}
				this.getbuyershow();
			},
			getbuyershow() {
				goodDetails
					.buyershow(this.id)
					.then(res => {
						this.buyershow = res.data.records.map(v => {
							v.img[0] = this.imgCDNUrl + v.img[0];
							return v;
						});
						uni.hideLoading();
						this.buyershowlist = res.data.total;
					})
					.catch(err => {
						uni.hideLoading();
						console.log(new Error('请检查网络后重试'));
					});
			},
			screen() {
				var classify = [];
				var it1 = [],
					it2 = [];
				var da1 = this.goodDetails.skus;
				var da10 = [];

				for (var i = 0; i < da1.length; i++) {

					var da2 = da1[i].productSkuDesp;
					var da3 = da2.split(',');

					it1.push(da3[0].split(':')[1])
					it2.push(da3[1].split(':')[1])

					for (var j = 0; j < it1.length; j++) {
						if (da10.indexOf(it1[j]) === -1) {
							da10.push(it1[j])
						}
					}
					for (var k = 0; k < it2.length; k++) {
						if (classify.indexOf(it2[k]) === -1) {
							classify.push(it2[k])
						}
					}


				}
				this.shop_details.push({
					size: classify,
					sublevel: da10
				});
				this.checked1 = this.shop_details[0].size[0]
				this.checked = this.shop_details[0].sublevel[0]
				this.indexs = 0
				this.idx = 0
			},
			sub() {

				if (this.start == 0) {
					uni.showToast({
						title: '活动未开始',
						duration: 2000
					});
					return;
				}
				if (this.start == 2) {
					uni.showToast({
						title: '活动已结束',
						duration: 2000
					});
					return;
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});

				var productId = '',
					productSkuDesp = '',
					skus = this.goodDetails.skus;
				// for (var i = 0; i < this.checked.length; i++) {
				// 	if (i != 0) {
				// 		productSkuDesp += ',';
				// 	}
				// 	productSkuDesp += this.shop_details[i].name + ':' + this.checked[i];
				// }
				for (var i = 0; i < skus.length; i++) {
					var size = skus[i].productSkuDesp.split(',')[1].split(':')[1]
					var color = skus[i].productSkuDesp.split(',')[0].split(':')[1]
					if (this.checked == color && this.checked1 == size) {
						productSkuDesp = skus[i].productSkuDesp;
						productId = skus[i].id;
					}
				}
				console.log(productSkuDesp, productId)
				if (this.is_preposition == 1) {
					var da = {
						productId: productId, // 货品id
						quantity: 1 // 货品数量
					};
					this.shopcart(da);
				} else {
					if(uni.getStorageSync('mr')=='a'&&uni.getStorageSync('agentinfo')&&this.actType!=2){
						console.log(this.actType!==2)
							
						this.commonality.route_balings('/pages/agent/placeorder/particulars',['actId','shopId'], [this.actId,this.id]);
					}else{
						var da = {
							actId: this.actId,
							goodsId: this.id,
							productId: productId, // 货品id
							productSkuDesp: productSkuDesp, // 货品sku
							goodsSn: this.goodDetails.goodsSn, // 货品货号
							quantity: 1, // 货品数量
							goodsName: this.goodDetails.goodsName, // 货品名称
							price: this.goodDetails.skus[0].discountPrice, // 货品价格
							img: this.goodImag[0] // 货品图片
						};
						
						uni.setStorage({
							key: 'shop',
							data: da,
							success: function() {
								uni.hideLoading();
								uni.navigateTo({
									url: '/pages/shop/order/affirm'
								});
							}
						});
					}
					
				}
			},
			shopcart(da) {
				goodDetails
					.shopcart(da)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 2000
							});
							this.is_preposition = 0
						} else {
							uni.showToast({
								title: '加入购物车失败',
								icon: 'none',
								duration: 2000
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: '加入购物车失败',
							icon: 'none',
							duration: 2000
						});
					});
			},
			go_show(e) {
				uni.navigateTo({
					url:'/pages/shop/commodity/buyersShow?shopbuyersShow='+e
				})
				// this.commonality.route_baling('/pages/shop/commodity/buyersShow', 'shopbuyersShow', e);
				
			},
			godetail(e) {
				this.commonality.route_baling('/pages/shop/commodity/buyersShowdetails', 'shopbuyersShowdetails', e);
			},
			preview(e) {
				uni.previewImage({
					current: e,
					urls: this.goodImag,
					longPressActions: {
						itemList: ['保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							// console.log(err.errMsg);
						}
					}
				});
			},
			// 选择尺寸
			checkeds(e, ind) {
				this.indexs = ind
				this.checked = e
				this.goodDetails.skus.map(v=>{
					if(v.productSkuDesp.split(',')[0].split(':')[1] ==this.checked ){
						this.productImg = this.imgCDNUrl + v.productImg
						this.disPrice=v.marketPrice
					}
				})
			},
			// 选择颜色
			checkcolor(e, ind) {
				this.idx = ind
				this.checked1 = e
				this.goodDetails.skus.map(v=>{
					if(v.productSkuDesp.split(',')[1].split(':')[1] ==this.checked1 ){
						
						this.disPrice=v.marketPrice
					}
				})
			},
			like() {
				uni.showLoading({
					title: '提交中',
					mask: true
				});

				var productId = '',

					skus = this.goodDetails.skus;
				// for (var i = 0; i < this.checked.length; i++) {
				// 	if (i != 0) {
				// 		productSkuDesp += ',';
				// 	}
				// 	productSkuDesp += this.shop_details[i].name + ':' + this.checked[i];
				// }
				for (var i = 0; i < skus.length; i++) {
					var size = skus[i].productSkuDesp.split(',')[1].split(':')[1]
					var color = skus[i].productSkuDesp.split(',')[0].split(':')[1]
					if (this.checked1 == size && this.checked == color) {

						productId = skus[i].id;
					}
					
				}
				var da = {
					productId: productId,
					goodsId: this.goodDetails.goodsId
				};
				console.log(da)
				if (!this.goodDetails.isCollect) {
					goodDetails
						.goodsconcernsave(da)
						.then(res => {
							uni.hideLoading();
							if (res.code == 200) {
								uni.showToast({
									title: '加入收藏成功',
									duration: 2000
								});
								
								this.goodDetails.isCollect=true
								
								
							} else {
								console.log(res)
								uni.showToast({
									title: '加入收藏失败',
									icon: 'none',
									duration: 2000
								});
							}
						})
						.catch(err => {
							uni.hideLoading();
							uni.showToast({
								title: '加入收藏失败',
								icon: 'none',
								duration: 2000
							});
						});
				}
				if (this.goodDetails.isCollect) {
					goodDetails
						.del(da)
						.then(res => {
							uni.hideLoading();
							if (res.code == 200) {
								uni.showToast({
									title: '您已取消收藏',
									duration: 2000
								});
								
								this.goodDetails.isCollect=false
								
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})
						.catch(err => {
							uni.hideLoading();

						});
				}

			},
			ceng() {
				this.is_preposition = 0;
				this.is_share = false;
			},
			mainScroll() {
				let read = this.$refs.main.scrollTop;
				if (read > 200) {
					this.is_go_top = true;
				} else {
					this.is_go_top = false;
				}
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			share(e) {
				if (e == 'wx') {
					var str='http://lm.weixingshishang.cn/#/pages/shop/commodity/particulars?shopId='+this.id
					if(this.actId){
						var str='http://lm.weixingshishang.cn/#/pages/shop/commodity/particulars?actId='+this.actId+'&shopId='+this.id+'&actType='+this.actType
					}
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 0,
						// href: 'http://lm.weixingshishang.cn/s?ie=UTF-8&wd=' + this.goodDetails.catName,
						 href: str,
						title: this.goodDetails.goodsName,
						summary: this.goodDetails.skus[0].discountPrice,
						imageUrl: this.imgCDNUrl + this.goodDetails.imgs[0]+'?x-oss-process=image/resize,m_lfit,h_100,w_100',
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}
			},
			copy(){
				var str='http://lm.weixingshishang.cn/#/pages/shop/commodity/particulars?shopId='+this.id
				if(this.actId){
					var str='http://lm.weixingshishang.cn/#/pages/shop/commodity/particulars?actId='+this.actId+'&shopId='+this.id+'&actType='+this.actType
				}
				uni.setClipboardData({
				    data: str,
				    success: function () {
				        uni.showToast({
				        	title:'复制成功'
							
				        })
				    }
				});
			},
			qrcode(){
				this.val='http://lm.weixingshishang.cn/#/pages/shop/commodity/particulars?shopId='+this.id
				if(this.actId){
					this.val='http://lm.weixingshishang.cn/#/pages/shop/commodity/particulars?actId='+this.actId+'&shopId='+this.id+'&actType='+this.actType
				}
				this.$refs.qrcode._makeCode()
		
			},
			qrR(res) {
						this.src = res
					},
			settime() {
				var da = Date.parse(new Date());
				var time = 0;
				var _this = this;
				if (this.startFlag > da) {
					time = (this.endFlag - da) / 1000;
					this.start = 0;
				} else if (this.endFlag > da) {
					time = (this.endFlag - da) / 1000;
					this.start = 1;
				} else {
					this.start = 2;
					return;
				}
				var d = parseInt(time / 86400);
				var h = parseInt((time - d * 86400) / 3600);
				var m = parseInt((time - d * 86400 - h * 3600) / 60);
				var s = parseInt(time - d * 86400 - h * 3600 - m * 60);
				this.time = d + '天' + h + '时' + m + '分' + s + '秒';
				setTimeout(function() {
					_this.settime();
				}, 1000);
			},
			clickHandler(item, index) {
				console.log(item, index);
			},
			changePage(current) {
				this.dots = current.detail.current;
				// console.log('当前轮播图序号为:' + current)
			}
		}
	};
</script>

<style lang="less" scoped>
	.particulars {
		height: 100%;
		overflow-y: auto;
		background: #fff;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.top {
			position: absolute;
			top: 10rpx;
			z-index: 9;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: var(--status-bar-height);

			text {
				background: #999999;
				color: #fff;
				display: block;
				text-align: center;
				width: 64rpx;
				line-height: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				font-size: 34rpx;

				image {
					position: relative;
					width: 39rpx;
					top: 7rpx;
				}
			}

			.left {
				background: #999999;
				border-radius: 50%;
				width: 64rpx;
				line-height: 64rpx;
				height: 64rpx;
				display: block;
				text-align: center;

				image {
					width: 18rpx;
					height: 34rpx;

				}
			}

			.like {
				position: absolute;
				right: 110rpx;

				image {
					width: 39rpx;
					height: 36rpx;
				}
			}

			.share {
				position: absolute;
				right: 20rpx;

				image {
					width: 39rpx;
					height: 36rpx;
				}
			}
		}

		.carousel {
			position: relative;

			image {
				display: block;
				min-height: 300rpx;
			}

			.dots {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				width: 91rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #999;
				color: #fff;
				border-radius: 22rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}

		.activity {
			background: #fe3a3a;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 64rpx;

			image {
				position: relative;
				width: 28rpx;
				height: 30rpx;
				top: 5rpx;
			}
		}

		.message {
			padding: 0 20rpx;

			.price {
				line-height: 120rpx;
				font-size: 44rpx;
				color: #bd3c8c;

				.original {
					font-size: 30rpx;
					text-decoration: line-through;
					color: #999;
				}

				.discount {
					position: relative;
					font-size: 28rpx;
					background: #f89bd9;
					padding: 0 10rpx 0 20rpx;
					color: #fff;
					margin-left: 50rpx;
					line-height: 36rpx;
				}

				.discount:before {
					position: absolute;
					content: '';
					top: 0;
					right: 100%;
					border-width: 20rpx;
					border-style: solid;
					border-color: transparent #f89bd9 transparent transparent;
				}

				.discount:after {
					position: absolute;
					content: '';
					display: block;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #fff;
					top: 50%;
					left: 0;
					transform: translate(-20%, -50%);
				}
			}

			.name {
				font-size: 34rpx;
				line-height: 48rpx;
				color: #000;
				margin-bottom: 57rpx;
			}
		}

		.specification {
			padding: 14rpx 20rpx;
			font-size: 28rpx;

			.name {
				font-size: 30rpx;
				line-height: 69rpx;
				color: #999;

				.right {
					padding: 0 20rpx;
				}
			}

			.ul {
				overflow: hidden;

				.li {
					float: left;
					padding: 21rpx 25rpx;
					background: #f4f4f4;
					color: #999999;
					border-radius: 10rpx;
					margin: 0 22rpx 30rpx 0;
				}

				.active {
					background: #da1799;
					color: #fff;
				}
			}
		}

		.refund {
			font-size: 26rpx;
			color: #999999;
			padding: 0 20rpx;
			line-height: 104rpx;

			image {
				position: relative;
				width: 35rpx;
				height: 31rpx;
				top: 5rpx;
				margin: 0 10rpx;
			}
		}

		.buyers-show {
			.title {
				padding: 0 20rpx;
				line-height: 105rpx;
				font-size: 30rpx;

				text {
					font-size: 26rpx;
					color: #999999;
					float: right;
				}
			}

			.img-list {
				height: 190rpx;
				padding: 0 20rpx;
				margin-bottom: 39rpx;
				white-space: nowrap;
				overflow-x: auto;
				overflow-y: hidden;

				.img {
					display: inline-block;
					width: 22vw;
					height: 25vw;
					position: relative;
					overflow: hidden;
					border-radius: 6rpx;
					margin-left: 2.2vw;

					image {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 100%;
						height: 100%;
					}
				}

				text:nth-child(1) {
					margin-left: 0;
				}
			}
		}

		.introduce {
			padding: 20rpx;

			.rule {
				margin-bottom: 20rpx;

				.title {
					width: 77%;
					margin: 30rpx auto 50rpx;
					font-size: 30rpx;
					height: 15rpx;
					text-align: center;
					border-bottom: 1rpx solid #e1e1e1;

					/*no*/
					text {
						background: #fff;
						padding: 0 27rpx;
					}
				}

				.list {
					text-align: center;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.bottom {
			position: fixed;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			bottom: 0;
			background: #ca5a9f;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			display: flex;

			text {
				display: inline-block;
				width: 100%;
			}

			.buy {
				background: linear-gradient(80deg, #d2158a, #fc6395);
			}
		}

		.preposition {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #fff;
			z-index: 100;

			.intro {
				position: relative;
				display: flex;
				padding: 49rpx 20rpx;

				.img {
					margin-right: 30rpx;

					image {
						width: 211rpx;
						height: 211rpx;
					}
				}

				.text {
					padding-right: 65rpx;

					.name {
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.price {
						position: absolute;
						bottom: 49rpx;
						color: #bd3c8c;
						font-size: 36rpx;
					}

					.control {
						position: absolute;
						bottom: 40rpx;
						right: 20rpx;
						width: 200rpx;
						border: 1px solid #a0a0a0;
						/*no*/
						color: #d0d0d0;
						display: flex;
						text-align: center;
						line-height: 58rpx;
						border-radius: 30rpx;
						font-size: 32rpx;

						text {
							flex: 1;
						}

						text:nth-child(2) {
							color: #333;
							border-left: 1rpx solid #9b9b9b;
							border-right: 1rpx solid #9b9b9b;
						}
					}
				}

				.close {
					position: absolute;
					top: 40rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 1px solid #9b9b9b;
					/*no*/
					text-align: center;
					color: #9b9b9b;
					line-height: 40rpx;

					.uni-icons {
						position: absolute;
						left: 0;
						top: 0;
						font-size: 40rpx;
					}
				}
			}

			.parameter {
				padding: 0 20rpx;

				.ul {
					margin-bottom: 10rpx;
					margin-top: 20rpx;

					.p {
						font-size: 28rpx;
						line-height: 57rpx;
					}

					.li {
						display: inline-block;
						border-radius: 6rpx;
						padding: 19rpx 24rpx;
						border: 1px solid #efefef;
						/*no*/
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-size: 30rpx;
					}

					.li.active {
						background: #bd3c8c;
						color: #fff;
						border-color: #bd3c8c;
					}
				}

				.input {
					.inp {
						width: 100%;
						border: 1px solid #efefef;
						line-height: 80rpx;
						height: 80rpx;
						padding: 20rpx;
						margin: 20rpx 0;
						box-sizing: border-box;
						border-radius: 6rpx;
						font-size: 28rpx;
					}
				}
			}

			.button {
				margin: 80rpx 20rpx 20rpx;
				background: linear-gradient(80deg, #d2158a, #fc6395);
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
				color: #fff;
				border-radius: 45rpx;
			}
		}

		.sharelist {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: #f4f4f4;
			z-index: 100;

			.ul {
				display: flex;
				padding: 73rpx 0 95rpx;

				.li {
					position: relative;
					flex: 1;
					text-align: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					p {
						position: absolute;
						min-width: 108rpx;
						padding: 13rpx 21rpx;
						background: #fff;
						left: 50%;
						bottom: -19rpx;
						border-radius: 30rpx;
						transform: translate(-50%, 0);
					}
				}
			}

			.close {
				text-align: center;
				line-height: 96rpx;
				font-size: 28rpx;
				background: #fff;
			}
		}
	}

	.overflow {
		position: fixed;
		width: 100%;
		top: 0;
		    right: 0;
		    bottom: 0;
		    left: 0;
			overflow: hidden;
	}

	.flex {
		overflow: hidden;
	}
</style>
